<template>
    <div class="menu-slider">
        <a-menu
            mode="inline"
            theme="light"
            style="width: 100%"
            :openKeys="params.openKeys"
            :selectedKeys="params.selectedKeys"
            @select="sliderChange"
        >
            <template v-for="item in adminRoutes" :key="item.name">
                <template v-if="!item.children">
                    <a-menu-item :route="item" :key="item.name">
                        <router-link :to="item.path">{{ item.meta.title }}</router-link>
                    </a-menu-item>
                </template>
                <template v-else>
                    <a-sub-menu :title="item.meta.title" :key="item.name">
                        <a-menu-item v-for="child in item.children" :route="child" :key="child.name">
                            <router-link :to="child.path">{{ child.meta.title }}</router-link>
                        </a-menu-item>
                    </a-sub-menu>
                </template>
            </template>
        </a-menu>
    </div>
</template>
<script setup>
import { reactive, watch, onMounted } from 'vue'
import { useRoute } from 'vue-router';
import adminRoutes from '../../router/admin.js'
const route = useRoute();

onMounted(()=>{
    // let route = JSON.parse(localStorage.getItem('menus'))
    // console.log(route,'route')
    // params.routes = route || [];
})
// 监听路由变化
console.log(route,'route')
watch(
    () => route.path, // 监听 path 变化
    (newPath, oldPath) => {
        console.log(newPath,'newPath')
        const newPaths = findParentByChildIdPath(adminRoutes, newPath);
        const parent = findParentByChildIdParent(adminRoutes, newPath)
        if(newPaths){
            params.selectedKeys = [newPaths.name]
            params.openKeys = [parent.name]
        }
    }
);
const findParentByChildId = (arr, targetId) => {
    if(!arr.length){
        return null;
    }
    for (let i = 0; i < arr.length; i++) {
        const parent = arr[i];
        if (parent.children) {
            for (let j = 0; j < parent.children.length; j++) {
                const child = parent.children[j];
                if (child.name === targetId) {
                    return parent;
                }
            }
        }
    }
    return null;
}
const findParentByChildIdPath = (arr, targetId) => {
    if(!arr.length){
        return null;
    }
    for (let i = 0; i < arr.length; i++) {
        const parent = arr[i];
        if (parent.children) {
            for (let j = 0; j < parent.children.length; j++) {
                const child = parent.children[j];
                if (child.path === targetId) {
                    return child;
                }
            }
        }
    }
    return null;
}
const findParentByChildIdParent = (arr, targetId) => {
    if(!arr.length){
        return null;
    }
    for (let i = 0; i < arr.length; i++) {
        const parent = arr[i];
        if (parent.children) {
            for (let j = 0; j < parent.children.length; j++) {
                const child = parent.children[j];
                if (child.path === targetId) {
                    return parent;
                }
            }
        }
    }
    return null;
}
const params = reactive({
    selectedKeys: [],
    openKeys:[],
    routes:[]
})
params.selectedKeys = [route.name];
let defaultOpen = findParentByChildId(adminRoutes,route.name)
if(defaultOpen) params.openKeys = [defaultOpen.name]
const sliderChange = (e) =>{
    params.selectedKeys = [e.key]
    params.openKeys = [e.keyPath[0]]
}
</script>
